<script setup>
import news from '@/assets/data/news'

const router = useRouter()
const pageSize = ref(3)
const currentPage = ref(1)
const currentNews = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = currentPage.value * pageSize.value
  return news.slice(start, end)
})
</script>

<template>
  <div class="root">
    <div class="banner"></div>
    <div class="wrapper">
      <div class="title">新闻动态</div>
      <div class="content">
        <div class="left">
          <ZarticleList
            v-for="item in currentNews"
            :key="item.id"
            :new="item"
            @click="router.push(`/news/articles/${item.id}`)"
          ></ZarticleList>
        </div>
        <div class="right">
          <Zcard>
            <template v-slot:header>
              <h3>热点资讯</h3>
            </template>
            <ul>
              <li v-for="item in 20" :key="item">
                <a href="#">
                  {{ item }}. Lorem ipsum dolor sit amet consectetur adipisicing
                  elit. Suscipit, at facere? Doloremque a magni non
                  voluptatibus. Molestiae impedit et ut eius? Ratione commodi
                  neque architecto maxime quibusdam alias ab corporis.</a
                >
              </li>
            </ul>
          </Zcard>
        </div>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="currentPage"
        :total="news.length"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        hide-on-single-page
      />
    </div>
  </div>
</template>

<style scoped>
.root {
  background-color: #f4f6f9;
}
.banner {
  background: url('@/assets/images/banner/news.jpeg') no-repeat center center;
}
.wrapper {
  .title {
    color: #000;
  }
  .content {
    padding: 50px 0;
    display: flex;
    gap: 20px;
    height: 640px;
    .left {
      flex: 3;
    }
    .right {
      flex: 1;
      height: 500px;
      .zcard {
        width: 295px;
        & :deep(header) {
          padding: 20px 0 10px 10px;
          h3 {
            font-size: 18px;
            font-weight: 600;
          }
        }
        & :deep(main) {
          width: 100%;
          padding: 10px 20px;
          ul {
            width: 100%;
            li {
              a {
                display: block;
                padding-right: 10px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #1f3b7b;
                &:hover {
                  text-decoration: underline;
                  color: #8d0000;
                }
              }
              &:first-child a {
                color: red;
                font-weight: bold;
              }
              &:nth-child(2) a {
                color: blue;
                font-weight: bold;
              }
              &:nth-child(3) a {
                color: green;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}
</style>
